<template>
  <div class="container" v-if="goodsDatail.id">
    <!-- 导航栏 -->
    <van-nav-bar left-arrow @click-left="$router.back()" fixed />

    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      :duration="1000"
      :autoplay="3000"
      indicator-color="#c00000"
    >
      <van-swipe-item v-for="(item, i) in goodsDatail.swiperList" :key="i">
        <img :src="item.cdnUrl" class="swaperImg" @click="previewClick(i)"
      /></van-swipe-item>
    </van-swipe>

    <!-- orderlabel -->
    <div class="orderlabel">
      <div class="pric">
        <span>{{
          goodsDatail.detailInfo.recommendPrice[0].recommendPrice
        }}</span
        >{{ goodsDatail.detailInfo.recommendPrice[0].unitName }}
      </div>
      <div class="title">{{ goodsDatail.detailInfo.spuName }}</div>
      <div class="description">
        {{ goodsDatail.detailInfo.spuDesc }}
      </div>
      <div class="tags">
        <span
          v-for="(item, i) in goodsDatail.detailInfo.sellingPoint"
          :key="i"
          >{{ item }}</span
        >
      </div>
    </div>

    <!-- coupon-wrap -->
    <div class="coupon-wrap">
      <div class="left">
        <span class="youhui">优惠</span>
        <span class="wmc">无门槛5元优惠券</span>
      </div>
      <van-button
        v-if="Discount"
        plain
        class="right"
        type="danger"
        @click="getDiscount"
        >立即领取</van-button
      >
      <van-button v-else plain class="right" type="danger" @click="overDiscount"
        >已领取</van-button
      >
    </div>
    <!-- 优惠券pop弹出层 -->
    <van-popup
      v-model="isDiscountShow"
      position="bottom"
      closeable
      :style="{ height: '60%' }"
    >
      <van-nav-bar title="领取优惠券" right-arrow />
      <!-- 优惠券 -->
      <div class="discount-box">
        <div class="left">
          <div class="title">
            <span class="title-strong">5</span>
            <span class="title-normol">元无门槛优惠券</span>
          </div>
          <div class="text">最高可抵扣5元</div>
          <div class="text">领取后7天内可用</div>
        </div>
        <div class="right">
          <van-button type="warning" @click="getDiscountClick"
            >立即领取</van-button
          >
        </div>
      </div>
    </van-popup>

    <div class="ESelect_Modular">
      <van-cell-group>
        <van-cell is-link @click="chooseAdress">
          <div slot="title">
            <span class="left">地址</span
            ><span class="center">{{
              JSON.stringify(address) == "[]"
                ? "请选择服务地址"
                : defaultAddress.address
                ? defaultAddress.address
                : "请选择服务地址"
            }}</span>
          </div>
        </van-cell>
        <van-cell is-link @click="chooseProp">
          <div slot="title">
            <span class="left">规格</span
            ><span class="center"
              >{{ area ? +area + "平米" : "请选择服务规格" }}
            </span>
          </div>
        </van-cell>
        <van-cell is-link @click="chooseTime">
          <div slot="title">
            <span class="left">时间</span
            ><span class="center">{{ time ? time : "请选择服务时间" }}</span>
          </div>
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 展示规格弹出层 -->
    <van-popup
      class="propBox"
      v-model="isPropShow"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <div class="topBar item">
        <div class="title">请选择服务规格</div>
        <div class="close" @click="isPropShow = false">
          <van-icon name="cross" />
        </div>
      </div>
      <van-divider />
      <div class="area item">
        <div class="left">
          <div class="title">服务面积</div>
          <span>(￥17/平米)</span>
        </div>
        <div class="right">
          <input
            type="text"
            autofocus="autofocus"
            v-model.trim="area"
            placeholder="请输入服务面积"
          />
          <span> 平米 </span>
        </div>
      </div>
      <van-divider />
      <div class="friendly-reminder">
        <div class="reminder-title">温馨提示：</div>
        <div>
          1、服务面积可根据房间居室预估填写；保洁师上门后将进行实际测量，最终根据实际面积多退少补；
        </div>
        <div>
          2、擦玻璃服务按照实际擦拭窗户面积（含窗框）计算，10平米起；不足时按照10平米计算；
        </div>
        <div>
          3、当玻璃厚度大于40mm或属于三层玻璃、或玻璃高度超过3m时，暂不提供服务；暂不提供室外作业服务。
        </div>
      </div>
      <van-button type="warning" block class="propBtn" @click="propBtnClick"
        >确定</van-button
      >
    </van-popup>

    <!-- 展示时间弹出框 -->
    <van-popup
      class="timeBox"
      v-model="isTimeShow"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="datehour"
        title="请选择服务时间"
        @cancel="isTimeShow = false"
        @confirm="chooseTimeConfirm"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>

    <!-- 详情 -->
    <div class="detail">
      <img
        :src="item.content"
        v-for="(item, i) in goodsDatail.articleImg"
        :key="i"
      />
    </div>

    <!-- 底部top -->
    <div class="bottom">
      <div class="left" @click="$router.push('/personnel')">
        <van-icon name="chat-o" />
        <span>客服</span>
      </div>
      <button class="right" @click="buy">立即购买</button>
    </div>
  </div>
</template>

<script>
import { getGoodsDetail } from "@/api/goods";
import { ImagePreview } from "vant";
import { isLogin } from "@/utils/commen";
import { mapState } from "vuex";
import dayjs from "dayjs";
import store from "@/store";
import { creatOrder } from "@/api/cart";
import { getAddress } from "@/api/cart";

export default {
  name: "goods_detail",
  props: {
    cat_id: {
      Object: [String, Number]
    }
  },
  computed: {
    ...mapState("cart", ["defaultAddress"])
  },
  data() {
    return {
      goodsDatail: {},
      isDiscountShow: false,
      isPropShow: false,
      isTimeShow: false,
      Discount: true,
      // 服务面积
      area: "",
      // 服务时间
      time: null,
      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      address: []
    };
  },
  created() {
    this.getGoodsDetail();
    this.getAddress();
  },
  methods: {
    async getAddress() {
      this.address = await getAddress({ user_id: store.getters.id });
    },
    async getGoodsDetail() {
      const data = await getGoodsDetail({ id: this.cat_id });
      this.goodsDatail = data[0];
    },
    previewClick(i) {
      const images = [];
      this.goodsDatail.swiperList.forEach(item => {
        images.push(item.cdnUrl);
      });
      ImagePreview({
        images: images,
        startPosition: i
      });
    },
    // 领取优惠券
    getDiscount() {
      // 判断是否登录
      if (isLogin()) {
        this.isDiscountShow = true;
      }
    },
    getDiscountClick() {
      this.$toast.success("领取成功！");
      this.isDiscountShow = false;
      this.Discount = false;
    },
    overDiscount() {
      this.$toast.fail("已领取，请勿重复领取");
    },
    // 选择地址
    chooseAdress() {
      this.$router.push("/my-address");
    },
    // 选择规格
    chooseProp() {
      if (!this.defaultAddress.address) {
        this.$toast("请选择地址！");
        return;
      }
      this.isPropShow = true;
    },
    // 确认选择规格
    propBtnClick() {
      !this.area ? this.$toast("请输入服务面积") : (this.isPropShow = false);
    },
    // 选择服务时间
    chooseTime() {
      if (!this.defaultAddress.address) {
        this.$toast("请选择地址！");
        return;
      }
      if (!this.area) {
        this.$toast("请选择规格！");
        return;
      }
      this.isTimeShow = true;
    },
    // 确认选择时间
    chooseTimeConfirm(value) {
      this.time = dayjs(value).format("YYYY-MM-DD HH:mm");
      this.isTimeShow = false;
    },
    // 点击立即购买
    async buy() {
      if (!isLogin()) {
        // 未登录
        this.$router.push("/login");
        return;
      }
      // 确认选择了地址
      if (!this.defaultAddress.address) {
        this.$toast("请选择地址！");
        return;
      }
      if (!this.area) {
        this.$toast("请选择服务规格！");
        return;
      }
      if (!this.time) {
        this.$toast("请选择服务时间！");
        return;
      }
      // 去购买,创建用户订单
      const orderInfo = {
        user_id: store.getters.id,
        address: store.getters.address.address,
        state: "0",
        tel: store.getters.address.tel,
        name: store.getters.address.name,
        price: +this.goodsDatail.detailInfo.recommendPrice[0].recommendPrice,
        time: this.time,
        type: this.goodsDatail.detailInfo.spuName,
        area: +this.area,
        total:
          +this.goodsDatail.detailInfo.recommendPrice[0].recommendPrice *
          +this.area
      };
      const result = await creatOrder(orderInfo);
      this.$router.push({
        name: "my-order",
        params: { order: result }
      });
    }
  },
  beforeRouteLeave(to, from, next) {
    if (to.path === "/my-address" || to.path === "/my-order") {
      from.meta.keepAlive = true;
    } else {
      from.meta.keepAlive = false;
    }
    next();
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getAddress();
    });
    next();
  }
};
</script>

<style lang="less" scoped>
.container {
  padding-top: 46px;
  padding-bottom: 65px;
}
.my-swipe .van-swipe-item {
  height: 311px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.swaperImg {
  width: 100%;
}
.orderlabel {
  background-color: #fff;
  .pric {
    padding: 5px 15px 0;
    color: #f33f3e;
    font-size: 12px;
    span {
      font-weight: 700;
      font-size: 30px;
    }
  }
  .title {
    padding: 5px 15px 0;
    font-size: 18px;
    font-weight: 700;
  }
  .description {
    padding: 5px 15px 0;
    font-size: 12px;
    color: #888b99;
    line-height: 40px;
  }
  .tags {
    height: 40px;
    background-color: #fbfbfb;
    span {
      font-size: 12px;
      color: #888b99;
      padding: 0 15px;
    }
  }
}

.coupon-wrap {
  background-color: #fff;
  line-height: 58px;
  height: 58px;
  margin: 10px 0;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    .youhui {
      background-color: #fef0f0;
      font-size: 12px;
      color: #f33f3e;
      padding: 3px;
    }
    .wmc {
      color: #363d4f;
      font-size: 14px;
      margin-left: 20px;
    }
  }
  .right {
    height: 30px;
  }
}

.ESelect_Modular {
  background-color: #fff;
  border-radius: 5px;
  .left {
    font-weight: 700;
    margin: 0 20px 0 0px;
    font-size: 14px;
  }
  .center {
    color: #666;
    font-size: 12px;
  }
}
.detail {
  width: 100%;
  img {
    width: 100%;
    display: block;
  }
}

.discount-box {
  height: 90px;
  width: 80%;
  background-color: #feedea;
  border-radius: 5px;
  margin: 20px auto;
  padding: 5px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    color: #f33f3e;
    .title {
      .title-strong {
        font-size: 32px;
      }
      .title-normol {
        font-size: 16px;
      }
    }
    .text {
      font-size: 12px;
      color: #ff6e57;
    }
  }
  .right {
    height: 26px;
    .van-button {
      border-radius: 5px;
      background-color: #fe6954;
      height: 26px;
      padding: 0 8px;
      .van-button__text {
        font-size: 12px;
      }
    }
  }
}

// 规格pop
.propBox {
  padding: 0 15px 0 15px !important;
  .van-divider {
    margin: 0;
  }
  .title {
    font-weight: 700;
    font-size: 20px;
  }
  .topBar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .close {
      margin-right: 20px;
    }
  }
  .area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 14px;
    }
    .left {
      flex: 5;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .right {
      flex: 5;
      display: flex;
      justify-content: center;
      align-items: center;
      input {
        width: 88px;
        border: none;
        background-color: #fff;
        &::placeholder {
          color: #ccc;
          font-size: 12px;
          text-align: center;
        }
      }
    }
  }
  .item {
    height: 60px;
    line-height: 60px;
  }
  .friendly-reminder {
    font-size: 12px;
    color: #949ea3;
    // padding: 0 15px;
    padding-right: 15px;
    padding-top: 20px;
    margin-bottom: 20px;
  }
  /deep/.van-button--block {
    width: 92%;
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  border-top: 1px solid #fdfdfd;
  .left {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    .van-icon {
      font-size: 16px;
    }
  }
  .right {
    flex: 8;
    border: none;
    background-color: #ff6b55;
    color: #fff;
    border-radius: 5px;
    margin-right: 40px;
    font-size: 15px;
    height: 44px;
  }
}
</style>
